<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";

import { useRouter, useRoute } from "vue-router";
import { Search } from "@element-plus/icons-vue";

import GatherSix from "../../gather/gathersix.vue";

const route = useRoute();
const router = useRouter();
defineOptions({
  name: "AssetDetail"
});

const activeName = ref("first");
onMounted(() => {
  const tp = route.query.tp;
  activeName.value = tp as string;
});

const ipdetailsearchformRef = ref<FormInstance>();

const ipdetailsearchform = reactive({
  iptype: "",
  ipvalue: "",
  port: "",
  system: "",
  domain: "",
  cdn: "",
  updateTime: ""
});

const ipdetailsearchformRules = reactive<FormRules>({
  iptype: [],
  ipvalue: [],
  port: [],
  system: [],
  domain: [],
  cdn: [],
  updateTime: []
});

const tableData = reactive({
  page: 1,
  size: 10,
  total: 11,
  items: []
  //   [
  //   {
  //     scope_group_name: "test",
  //     scope_type: " ip",
  //     scope: "111. 111. 111. 112, 12. 12. 12. 12,13.13.13.13",
  //     scope_array: ["111. 111. 111.112", "12. 12. 12.12", "13.13.13.13"],
  //     black_scope: null,
  //     black_scope_array: [],
  //     scope_id: "65994d1b8dbf870043af437c"
  //   },
  //   {
  //     scope_group_name: "test1",
  //     scope_type: "domain",
  //     scope: "bau.com, www.qq.com",
  //     scope_array: ["bau.com", "www.qq.com"],
  //     black_scope: null,
  //     black_scope_array: [],
  //     scope_id: "65994d1b8dbf870043af437cvc"
  //   }
  // ]
});

//tab点击
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

//清空表单
const clearIpSearchForm = formIns => {
  formIns.resetFields();
};

//批量删除
const muiltDelete = params => {};
//批量导出
const muiltExport = params => {};
</script>

<template>
  <div class="right-container">
    <data class="gather-container">
      <GatherSix class="gather-box-blue" />
    </data>

    <el-card shadow="never">
      <template #header>
        <div class="card-header">相关资产详情</div>
      </template>

      <div>
        <!-- type="card" -->
        <el-tabs
          v-model="activeName"
          type="border-card"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="ip" name="ip">
            <div class="search-box">
              <el-form
                :inline="true"
                :model="ipdetailsearchform"
                :rules="ipdetailsearchformRules"
                ref="ipdetailsearchformRef"
                class="demo-form-inline"
                size="small"
              >
                <el-form-item label="ip类别" prop="iptype">
                  <el-input
                    v-model="ipdetailsearchform.iptype"
                    placeholder="ip类别"
                    maxlength="30"
                    clearable
                  >
                    <template #suffix>
                      <!-- prefix -->
                      <el-icon class="el-input__icon"><search /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="ip" prop="ipvalue">
                  <el-input
                    v-model="ipdetailsearchform.ipvalue"
                    placeholder="ip"
                    maxlength="30"
                    clearable
                  >
                    <template #suffix>
                      <!-- prefix -->
                      <el-icon class="el-input__icon"><search /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>

                <el-form-item label="端口" prop="port">
                  <el-input
                    v-model="ipdetailsearchform.port"
                    placeholder="端口"
                    clearable
                    ><template #suffix>
                      <!-- prefix -->
                      <el-icon class="el-input__icon"><search /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="操作系统" prop="system">
                  <el-input
                    v-model="ipdetailsearchform.system"
                    placeholder="操作系统"
                    clearable
                    ><template #suffix>
                      <!-- prefix -->
                      <el-icon class="el-input__icon"><search /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="域名" prop="domain">
                  <el-input
                    v-model="ipdetailsearchform.domain"
                    placeholder="域名"
                    clearable
                    ><template #suffix>
                      <!-- prefix -->
                      <el-icon class="el-input__icon"><search /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="CDN" prop="cdn">
                  <el-input
                    v-model="ipdetailsearchform.cdn"
                    placeholder="cdn"
                    clearable
                    ><template #suffix>
                      <!-- prefix -->
                      <el-icon class="el-input__icon"><search /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="更新时间" prop="updateTime">
                  <el-input
                    v-model="ipdetailsearchform.updateTime"
                    placeholder="更新时间"
                    clearable
                    ><template #suffix>
                      <!-- prefix -->
                      <el-icon class="el-input__icon"><search /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>

                <el-form-item>
                  <el-button
                    type="primary"
                    @click="clearIpSearchForm(ipdetailsearchformRef)"
                    >清除</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button type="success" @click="muiltExport"
                    >批量导出</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button type="warning" @click="muiltDelete"
                    >批量删除</el-button
                  >
                </el-form-item>
              </el-form>
            </div>

            <div class="result-table-box">
              <el-table
                :data="tableData.items"
                :border="false"
                style="width: 100%"
              >
                <el-table-column type="index" width="100" label="序号" />

                <el-table-column type="expand" v-if="false">
                  <template #default="props">
                    <!-- <div m="4">
                    <h3>Family</h3>
                    <el-table :data="props.row.family" :border="childBorder">
                      <el-table-column label="Name" prop="name" />
        
                    </el-table>
                  </div> -->
                  </template>
                </el-table-column>
                <el-table-column label="ip" prop="scope_group_name" />
                <el-table-column
                  label="操作系统"
                  min-width="300px"
                  width="300px"
                >
                  <template #default="rowscope">
                    <el-tag
                      v-if="
                        rowscope.row.scope_array &&
                        rowscope.row.scope_array.length >= 1
                      "
                      :key="0"
                      class="mx-1"
                      type="success"
                      effect="plain"
                    >
                      {{ rowscope.row.scope_array[0] }}
                    </el-tag>
                    <el-tag
                      v-if="
                        rowscope.row.scope_array &&
                        rowscope.row.scope_array.length > 1
                      "
                      :key="1"
                      class="mx-1"
                      type="success"
                      effect="plain"
                    >
                      {{ rowscope.row.scope_array[1] }}
                    </el-tag>
                    <el-tag
                      key="2"
                      v-if="
                        rowscope.row.scope_array &&
                        rowscope.row.scope_array.length > 2
                      "
                      class="mx-1"
                      type="success"
                      effect="plain"
                      >...</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column label="开放端口">
                  <template #default="rowscope">
                    <div>
                      <el-link
                        type="primary"
                        :underline="true"
                        @click="copyAsset(rowscope)"
                        >复制</el-link
                      >
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="关联域名" prop="scope_group_name" />
                <el-table-column label="Geo" prop="scope_group_name" />
                <el-table-column label="As" prop="scope_group_name" />
                <el-table-column label="创建人" prop="scope_group_name" />
                <el-table-column label="创建时间" prop="scope_group_name" />
                <el-table-column>
                  <template #default="rowscope">
                    <!-- <el-button
                      size="small"
                      @click="addAssetRow(rowscope.$index, rowscope.row)"
                      >添加资产分组范围</el-button
                    >
                    <el-button
                      size="small"
                      type="warning"
                      @click="deleteAsset(rowscope.$index, rowscope.row)"
                    >
                      删除</el-button> -->
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="域名" name="domain">域名</el-tab-pane>
          <el-tab-pane label="主机" name="zhuji">主机</el-tab-pane>
          <el-tab-pane label="小程序" name="miniprogram">小程序</el-tab-pane>
          <el-tab-pane label="公众号" name="gongzhonghao">公众号</el-tab-pane>
          <el-tab-pane label="高危端口" name="dgport">高危端口</el-tab-pane>
          <el-tab-pane label="高危组件" name="dgcomp">高危组件</el-tab-pane>
          <el-tab-pane label="未知资产" name="dgcomps">未知资产</el-tab-pane>
          <el-tab-pane label="异常资产" name="dgcompd">异常资产</el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-tabs--border-card) {
  border-right: none;
  border-bottom: none;
  border-left: none;
}
:deep(.el-tabs--border-card > .el-tabs__header) {
  background: #dfe8f5;
}

:deep(.el-tabs__item) {
  font-weight: bold;
  min-width: 100px;
}

:deep(.el-form-item__label) {
  min-width: 68px;
}

:deep(.el-card__header) {
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: none;
}

:deep(.el-card__body) {
  padding: 0;
}

.right-container {
  height: 100%;
  margin: 10px !important;
  border-radius: 5px;
  background: white;
}

.gather-container {
  display: block;
  // margin: 10px 10px 0 10px;
  margin-bottom: 10px;
}
</style>
